<template>
  <ul class="sidebar-menu">
    <li class="header">导航</li>
    <li class="active pageLink" v-if="hasRole(8)" v-on:click="toggleMenu">
      <router-link to="/">
        <i class="fa fa-home fa-lg"></i>
        <span class="page">首页</span>
      </router-link>
    </li>
    <li class="treeview" v-if="hasRole(4) || hasRole(2) || hasRole(1)" v-on:click="toggleMenu">
      <router-link to="/organization">
        <i class="fa fa-sign-in fa-lg"></i>
        <span>系统管理</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left fa-fw pull-right"></i>
        </span>
      </router-link>
      <ul class="treeview-menu">
        <li>
          <router-link to="/organization" v-if="hasRole(4)">
            <i class="fa fa-bookmark-o"></i>组织架构管理
          </router-link>
        </li>
        <li>
          <router-link to="accountMgr" v-if="hasRole(4)">
            <i class="fa fa-user-circle"></i>账号角色管理
          </router-link>
        </li>
        <li>
          <router-link to="/roleMgr" v-if="hasRole(4)">
            <i class="fa fa-user-secret"></i>角色管理
          </router-link>
        </li>
        <li>
          <router-link to="/sysConfig" v-if="hasRole(4)">
            <i class="fa fa-cogs"></i>基础配置
          </router-link>
        </li>
        <!-- <li class="treeview" v-on:click="toggleMenu">
          <router-link to="/funcPrivMgr">
            <i class="fa fa-sign-in fa-lg"></i>
            <span>权限管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left fa-fw pull-right"></i>
            </span>
          </router-link>
          <ul class="treeview-menu">
            <li>
              <router-link to="/funcPrivMgr">
                <i class="fa fa-key"></i>功能权限管理
              </router-link>
            </li>
            <li>
              <router-link to="/dataPrivMgr">
                <i class="fa fa-object-group"></i>数据访问权限管理
              </router-link>
            </li>
            <li>
              <router-link to="/reportPrivMgr">
                <i class="fa fa-bar-chart-o"></i>报表权限管理
              </router-link>
            </li>
          </ul>
        </li>
        <li>
          <router-link to="/#">
            <i class="fa fa-cogs"></i>基础数据管理
          </router-link>
        </li> -->
        <li v-if="hasRole(2)">
          <router-link to="/approvals">
            <i class="fa fa-universal-access"></i>流程审批管理
          </router-link>
        </li>
        <li v-if="hasRole(1)">
          <router-link to="/submits">
            <i class="fa fa-universal-access"></i>我的流程申请
          </router-link>
        </li>
      </ul>
    </li>
    <li class="treeview" v-on:click="toggleMenu">
      <router-link to="/users">
        <i class="fa fa-user fa-lg"></i>
        <span>人事管理</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left fa-fw pull-right"></i>
        </span>
      </router-link>
      <ul class="treeview-menu">
        <li>
          <router-link to="/users">
            <i class="fa fa-user-circle"></i>人事信息查询
          </router-link>
        </li>
        <li class="treeview" v-on:click="toggleMenu">
          <router-link to="/baseInfoMgr">
            <i class="fa fa-user fa-lg"></i>
            <span>人事信息管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left fa-fw pull-right"></i>
            </span>
          </router-link>
          <ul class="treeview-menu">
            <li v-if="hasRole(1)">
              <router-link to="/userimport">
                <i class="fa fa-info-circle"></i>人事信息录入
              </router-link>
            </li>
            <li>
              <router-link to="/baseInfoMgr">
                <i class="fa fa-cubes"></i>基础信息查询
              </router-link>
            </li>
            <li>
              <router-link to="/extraInfoMgr">
                <i class="fa fa-cube"></i>补充信息查询
              </router-link>
            </li>
            <li>
              <router-link to="/social">
                <i class="fa fa-home"></i>家庭及主要社会关系查询
              </router-link>
            </li>
            <li>
              <router-link to="/training">
                <i class="fa fa-battery-half"></i>在职培训查询
              </router-link>
            </li>
            <li>
              <router-link to="/furtherEdu">
                <i class="fa fa-mortar-board"></i>在职进修学历(学位)教育查询
              </router-link>
            </li>
            <li>
              <router-link to="/professionTech">
                <i class="fa fa-user-secret"></i>专业技术职务查询
              </router-link>
            </li>
            <li>
              <router-link to="/races">
                <i class="fa fa-soccer-ball-o"></i>参加活动(竞赛)情况查询
              </router-link>
            </li>
            <li>
              <router-link to="/project">
                <i class="fa fa-building-o"></i>参与工程项目建设情况查询
              </router-link>
            </li>
            <li>
              <router-link to="/kpis">
                <i class="fa fa-trophy"></i>年度考核查询
              </router-link>
            </li>
          </ul>
        </li>
        <li>
          <router-link to="/contact">
            <i class="fa fa-phone-square"></i>通讯录
          </router-link>
        </li>
        <li>
          <router-link to="/onjobusers">
            <i class="fa fa-address-card-o"></i>在职人员花名册
          </router-link>
        </li>
        <li>
          <router-link to="/tempusers">
            <i class="fa fa-address-card-o"></i>临时人员花名册
          </router-link>
        </li>
        <li>
          <router-link to="/retriedusers">
            <i class="fa fa-address-card-o"></i>退休人员花名册
          </router-link>
        </li>
      </ul>
    </li>
   <!-- <li class="treeview" v-on:click="toggleMenu">
      <router-link to="/#">
        <i class="fa  fa-address-card fa-lg"></i>
        <span>人事档案</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left fa-fw pull-right"></i>
        </span>
      </router-link>
      <ul class="treeview-menu">
        <li>
          <router-link to="/#">
            <i class="fa fa-address-book-o"></i>人事档案录入
          </router-link>
        </li>
        <li>
          <router-link to="/#">
            <i class="fa fa-drivers-license-o"></i>人事档案查阅
          </router-link>
        </li>
        <li>
          <router-link to="/#">
            <i class="fa fa-drivers-license"></i>人事档案搜索
          </router-link>
        </li>
        <li class="treeview" v-on:click="toggleMenu">
          <router-link to="/#">
            <i class="fa fa-user fa-lg"></i>
            <span>人事档案查阅审批</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left fa-fw pull-right"></i>
            </span>
          </router-link>
          <ul class="treeview-menu">
            <li>
              <router-link to="/#">
                <i class="fa fa-envelope"></i>人事档案查阅审批
              </router-link>
            </li>
            <li>
              <router-link to="/#">
                <i class="fa fa-envelope-o"></i>人事档案借阅审批
              </router-link>
            </li>
            <li>
              <router-link to="/#">
                <i class="fa fa-envelope-open"></i>人事档案接收
              </router-link>
            </li>
            <li>
              <router-link to="/#">
                <i class="fa fa-envelope-open-o"></i>人事档案转移
              </router-link>
            </li>
          </ul>
        </li>
        <li>
          <router-link to="/#">
            <i class="fa fa-vcard"></i>汇总
          </router-link>
        </li>
      </ul>
    </li>  -->
    <!-- <li class="treeview" v-on:click="toggleMenu">
      <router-link to="/#">
        <i class="fa fa-book fa-lg"></i>
        <span>文书档案</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left fa-fw pull-right"></i>
        </span>
      </router-link>
      <ul class="treeview-menu">
        <li>
          <router-link to="/#">
            <i class="fa fa-file-excel-o"></i>文书档案录入
          </router-link>
        </li>
        <li>
          <router-link to="/#">
            <i class="fa fa-file-archive-o"></i>文书档案查询
          </router-link>
        </li>
        <li>
          <router-link to="/#">
            <i class="fa fa-file-o"></i>文书档案借阅
          </router-link>
        </li>
        <li>
          <router-link to="/#">
            <i class="fa fa-file-zip-o"></i>汇总
          </router-link>
        </li>
      </ul>
    </li> -->
  </ul>
</template>
<script>
export default {
  name: 'SidebarMenu',
  data(){
    return {
      activeMenu:'',
      menutree:[
        {
          name:'系统管理',
          href:'#',
          icon:'fa-sign-in',
          submenus:[{
            name:'组织架构管理',
            href:'organization',
            icon:'fa-bookmark'
          }]
        }
      ]
    }
  },
  methods: {
    toggleMenu(event) {
      // remove active from li
      var active = document.querySelector('li.pageLink.active')

      if (active) {
        active.classList.remove('active')
      }
      // window.$('li.pageLink.active').removeClass('active')
      // Add it to the item that was clicked
      event.toElement.parentElement.className = 'pageLink active'
    },
    hasRole(role){
      return (this.$store.state.user.role.roles & role) == role
    }

  }
}
</script>
<style>
/* override default */

.sidebar-menu>li>a {
  padding: 12px 15px 12px 15px;
}

.sidebar-menu li.active>a>.fa-angle-left,
.sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
  animation-name: rotate;
  animation-duration: .2s;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-90deg);
  }
}
</style>
